<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"huh32993.gitee.io","root":"/","scheme":"Pisces","version":"7.8.0","exturl":true,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"mac"},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":true,"preload":true},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="网页布局（Layout）是CSS的一个重点应用  布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。">
<meta property="og:type" content="article">
<meta property="og:title" content="Flex布局设计-语法篇">
<meta property="og:url" content="http://huh32993.gitee.io/2020/04/24/Flex%E5%B8%83%E5%B1%80%E8%AE%BE%E8%AE%A1-%E8%AF%AD%E6%B3%95%E7%AF%87/index.html">
<meta property="og:site_name" content="Fly-Blog">
<meta property="og:description" content="网页布局（Layout）是CSS的一个重点应用  布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_001.gif">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_002.png">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_003.jpg">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_004.png">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_005.png">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_006.png">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_007.png">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_008.jpg">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_009.jpg">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_010.png">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_011.png">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_012.png">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_013.png">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_014.png">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_015.jpg">
<meta property="og:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_016.png">
<meta property="article:published_time" content="2020-04-24T00:19:58.000Z">
<meta property="article:modified_time" content="2020-04-24T01:41:03.988Z">
<meta property="article:author" content="飞翔">
<meta property="article:tag" content="Flex">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://huh32993.gitee.io/uploads/UI/Flex/flex_001.gif">

<link rel="canonical" href="http://huh32993.gitee.io/2020/04/24/Flex%E5%B8%83%E5%B1%80%E8%AE%BE%E8%AE%A1-%E8%AF%AD%E6%B3%95%E7%AF%87/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>Flex布局设计-语法篇 | Fly-Blog</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">Fly-Blog</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">宠辱不惊，看庭前花开花落；<br>去留无意，望天上云卷云舒。</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签<span class="badge">24</span></a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类<span class="badge">16</span></a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档<span class="badge">22</span></a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://huh32993.gitee.io/2020/04/24/Flex%E5%B8%83%E5%B1%80%E8%AE%BE%E8%AE%A1-%E8%AF%AD%E6%B3%95%E7%AF%87/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.png">
      <meta itemprop="name" content="飞翔">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Fly-Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Flex布局设计-语法篇
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2020-04-24 08:19:58 / 修改时间：09:41:03" itemprop="dateCreated datePublished" datetime="2020-04-24T08:19:58+08:00">2020-04-24</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/UI/" itemprop="url" rel="index"><span itemprop="name">UI</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h3 id="网页布局（Layout）是CSS的一个重点应用"><a href="#网页布局（Layout）是CSS的一个重点应用" class="headerlink" title="网页布局（Layout）是CSS的一个重点应用"></a>网页布局（Layout）是CSS的一个重点应用</h3><p><img src="/uploads/UI/Flex/flex_001.gif" alt="BOX"></p>
<ul>
<li>布局的传统解决方案，基于<span class="exturl" data-url="aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvQ1NTL2JveF9tb2RlbA==">盒状模型<i class="fa fa-external-link-alt"></i></span>，依赖 <span class="exturl" data-url="aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvQ1NTL2Rpc3BsYXk=">display<i class="fa fa-external-link-alt"></i></span> 属性 + <span class="exturl" data-url="aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvQ1NTL3Bvc2l0aW9u">position<i class="fa fa-external-link-alt"></i></span>属性 + <span class="exturl" data-url="aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvQ1NTL2Zsb2F0">float<i class="fa fa-external-link-alt"></i></span>属性。它对于那些特殊布局非常不方便，比如，<span class="exturl" data-url="aHR0cHM6Ly9jc3MtdHJpY2tzLmNvbS9jZW50ZXJpbmctY3NzLWNvbXBsZXRlLWd1aWRlLw==">垂直居中<i class="fa fa-external-link-alt"></i></span>就不容易实现。</li>
</ul>
<a id="more"></a>
<p><img src="/uploads/UI/Flex/flex_002.png" alt="CSS FLexBox"></p>
<ul>
<li>2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。<br><img src="/uploads/UI/Flex/flex_003.jpg" alt="CSS FLexBox"></li>
<li>Flex 布局将成为未来布局的首选方案。本文介绍它的语法,以下内容主要参考了下面两篇文章：<span class="exturl" data-url="aHR0cHM6Ly9jc3MtdHJpY2tzLmNvbS9zbmlwcGV0cy9jc3MvYS1ndWlkZS10by1mbGV4Ym94Lw==">A Complete Guide to Flexbox<i class="fa fa-external-link-alt"></i></span> 和 <span class="exturl" data-url="aHR0cHM6Ly9zY290Y2guaW8vdHV0b3JpYWxzL2EtdmlzdWFsLWd1aWRlLXRvLWNzczMtZmxleGJveC1wcm9wZXJ0aWVz">A Visual Guide to CSS3 Flexbox Properties<i class="fa fa-external-link-alt"></i></span>。</li>
</ul>
<h3 id="一、Flex布局是什么？"><a href="#一、Flex布局是什么？" class="headerlink" title="一、Flex布局是什么？"></a>一、Flex布局是什么？</h3><ul>
<li>Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.box&#123;</span><br><span class="line">  display: flex;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>行内元素也可以使用 Flex 布局。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.box&#123;</span><br><span class="line">  display: inline-flex;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>Webkit 内核的浏览器，必须加上-webkit前缀。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.box&#123;</span><br><span class="line">  display: -webkit-flex; /* Safari */</span><br><span class="line">  display: flex;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<p><strong>注意:</strong> <font face="微软雅黑" color="red" size="2">设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。</font></p>
<h3 id="二、基本概念"><a href="#二、基本概念" class="headerlink" title="二、基本概念"></a>二、基本概念</h3><hr>
<ul>
<li>采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。<br><img src="/uploads/UI/Flex/flex_004.png" alt="BOX"></li>
<li>容器默认存在两根轴：水平的<code>主轴</code>（main axis）和垂直的<code>交叉轴</code>（cross axis）。主轴的开始位置（与边框的交叉点）叫做<code>main start</code>，结束位置叫做<code>main end</code>；交叉轴的开始位置叫做<code>cross start</code>，结束位置叫做<code>cross end</code>。</li>
<li>项目默认沿主轴排列。单个项目占据的主轴空间叫做<code>main size</code>，占据的交叉轴空间叫做<code>cross size</code>。</li>
</ul>
<h3 id="三、容器的属性"><a href="#三、容器的属性" class="headerlink" title="三、容器的属性"></a>三、容器的属性</h3><hr>
<ul>
<li>以下6个属性设置在容器上。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">flex-direction</span><br><span class="line">flex-wrap</span><br><span class="line">flex-flow</span><br><span class="line">justify-content</span><br><span class="line">align-items</span><br><span class="line">align-content</span><br></pre></td></tr></table></figure>
<h4 id="3-1-flex-direction属性"><a href="#3-1-flex-direction属性" class="headerlink" title="3.1 flex-direction属性"></a>3.1 flex-direction属性</h4></li>
</ul>
<hr>
<ul>
<li>flex-direction属性决定主轴的方向（即项目的排列方向）。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.box &#123;</span><br><span class="line">  flex-direction: row | row-reverse | column | column-reverse;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<img src="/uploads/UI/Flex/flex_005.png" alt="BOX"></li>
<li>它可能有4个值。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">row（默认值）：主轴为水平方向，起点在左端。</span><br><span class="line">row-reverse：主轴为水平方向，起点在右端。</span><br><span class="line">column：主轴为垂直方向，起点在上沿。</span><br><span class="line">column-reverse：主轴为垂直方向，起点在下沿。</span><br></pre></td></tr></table></figure>
<h4 id="3-2-flex-wrap属性"><a href="#3-2-flex-wrap属性" class="headerlink" title="3.2 flex-wrap属性"></a>3.2 flex-wrap属性</h4></li>
</ul>
<hr>
<ul>
<li>默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。<br><img src="/uploads/UI/Flex/flex_006.png" alt="BOX"><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.box&#123;</span><br><span class="line">  flex-wrap: nowrap | wrap | wrap-reverse;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>它可能取三个值。</li>
<li><ul>
<li>（1）nowrap（默认）：不换行。<br><img src="/uploads/UI/Flex/flex_007.png" alt="BOX"></li>
</ul>
</li>
<li><ul>
<li>（2）wrap：换行，第一行在上方。<br><img src="/uploads/UI/Flex/flex_008.jpg" alt="BOX"></li>
</ul>
</li>
<li><ul>
<li>（3）wrap-reverse：换行，第一行在下方。<br><img src="/uploads/UI/Flex/flex_009.jpg" alt="BOX"></li>
</ul>
</li>
</ul>
<h4 id="3-3-flex-flow"><a href="#3-3-flex-flow" class="headerlink" title="3.3 flex-flow"></a>3.3 flex-flow</h4><hr>
<ul>
<li><code>flex-flow</code>属性是<code>flex-direction</code>属性和<code>flex-wrap</code>属性的简写形式，默认值为<code>row nowrap</code>。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.box &#123;</span><br><span class="line">  flex-flow: &lt;flex-direction&gt; || &lt;flex-wrap&gt;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="3-4-justify-content属性"><a href="#3-4-justify-content属性" class="headerlink" title="3.4 justify-content属性"></a>3.4 justify-content属性</h4></li>
</ul>
<hr>
<ul>
<li>justify-content属性定义了项目在主轴上的对齐方式。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.box &#123;</span><br><span class="line">  justify-content: flex-start | flex-end | center | space-between | space-around;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<img src="/uploads/UI/Flex/flex_010.png" alt="BOX"></li>
<li>它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">flex-start（默认值）：左对齐</span><br><span class="line">flex-end：右对齐</span><br><span class="line">center： 居中</span><br><span class="line">space-between：两端对齐，项目之间的间隔都相等。</span><br><span class="line">space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</span><br></pre></td></tr></table></figure>
<h4 id="3-5-align-items属性"><a href="#3-5-align-items属性" class="headerlink" title="3.5 align-items属性"></a>3.5 align-items属性</h4></li>
</ul>
<hr>
<ul>
<li>align-items属性定义项目在交叉轴上如何对齐。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.box &#123;</span><br><span class="line">  align-items: flex-start | flex-end | center | baseline | stretch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<img src="/uploads/UI/Flex/flex_011.png" alt="BOX"></li>
<li>它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">flex-start：交叉轴的起点对齐。</span><br><span class="line">flex-end：交叉轴的终点对齐。</span><br><span class="line">center：交叉轴的中点对齐。</span><br><span class="line">baseline: 项目的第一行文字的基线对齐。</span><br><span class="line">stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h4 id="3-6-align-content属性"><a href="#3-6-align-content属性" class="headerlink" title="3.6 align-content属性"></a>3.6 align-content属性</h4><hr>
<ul>
<li>align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.box &#123;</span><br><span class="line">  align-content: flex-start | flex-end | center | space-between | space-around | stretch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<img src="/uploads/UI/Flex/flex_012.png" alt="BOX"></li>
<li>该属性可能取6个值。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">flex-start：与交叉轴的起点对齐。</span><br><span class="line">flex-end：与交叉轴的终点对齐。</span><br><span class="line">center：与交叉轴的中点对齐。</span><br><span class="line">space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</span><br><span class="line">space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</span><br><span class="line">stretch（默认值）：轴线占满整个交叉轴。</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h3 id="四、项目的属性"><a href="#四、项目的属性" class="headerlink" title="四、项目的属性"></a>四、项目的属性</h3><hr>
<ul>
<li>以下6个属性设置在项目上。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">order</span><br><span class="line">flex-grow</span><br><span class="line">flex-shrink</span><br><span class="line">flex-basis</span><br><span class="line">flex</span><br><span class="line">align-self</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h4 id="4-1-order属性"><a href="#4-1-order属性" class="headerlink" title="4.1 order属性"></a>4.1 order属性</h4><hr>
<ul>
<li>order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item &#123;</span><br><span class="line">  order: &lt;<span class="built_in">integer</span>&gt;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<img src="/uploads/UI/Flex/flex_013.png" alt="BOX"></li>
</ul>
<h4 id="4-2-flex-grow属性"><a href="#4-2-flex-grow属性" class="headerlink" title="4.2 flex-grow属性"></a>4.2 flex-grow属性</h4><hr>
<ul>
<li>flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item &#123;</span><br><span class="line">  flex-grow: &lt;number&gt;; /* default 0 */</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<img src="/uploads/UI/Flex/flex_014.png" alt="BOX"></li>
<li>如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</li>
</ul>
<h4 id="4-3-flex-shrink属性"><a href="#4-3-flex-shrink属性" class="headerlink" title="4.3 flex-shrink属性"></a>4.3 flex-shrink属性</h4><hr>
<ul>
<li>flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item &#123;</span><br><span class="line">  flex-shrink: &lt;number&gt;; /* default 1 */</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<img src="/uploads/UI/Flex/flex_015.jpg" alt="BOX"></li>
<li>如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。</li>
<li>负值对该属性无效。</li>
</ul>
<h4 id="4-4-flex-basis属性"><a href="#4-4-flex-basis属性" class="headerlink" title="4.4 flex-basis属性"></a>4.4 flex-basis属性</h4><hr>
<ul>
<li>sis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item &#123;</span><br><span class="line">  flex-basis: &lt;length&gt; | auto; /* default auto */</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。</li>
</ul>
<h4 id="4-5-flex属性"><a href="#4-5-flex属性" class="headerlink" title="4.5 flex属性"></a>4.5 flex属性</h4><hr>
<ul>
<li><p>flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item &#123;</span><br><span class="line">  flex: none | [ &lt;<span class="string">'flex-grow'</span>&gt; &lt;<span class="string">'flex-shrink'</span>&gt;? || &lt;<span class="string">'flex-basis'</span>&gt; ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。</p>
</li>
<li><p>建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。</p>
</li>
</ul>
<h4 id="4-6-align-self属性"><a href="#4-6-align-self属性" class="headerlink" title="4.6 align-self属性"></a>4.6 align-self属性</h4><hr>
<ul>
<li>align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item &#123;</span><br><span class="line">  align-self: auto | flex-start | flex-end | center | baseline | stretch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<img src="/uploads/UI/Flex/flex_016.png" alt="BOX"></li>
<li>该属性可能取6个值，除了auto，其他都与align-items属性完全一致。</li>
</ul>
<p>[ Flex布局教程 ]:<span class="exturl" data-url="aHR0cDovL3d3dy5ydWFueWlmZW5nLmNvbS9ibG9nLzIwMTUvMDcvZmxleC1ncmFtbWFyLmh0bWw=">http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html<i class="fa fa-external-link-alt"></i></span> Flex布局教程</p>

    </div>

    
    
    <div>
    
        <div style="text-align:center;color: #ccc;font-size:14px;">
        -------------本文结束 <i class="fa fa-paw"></i> 感谢您的阅读-------------
        </div>
    
</div>


      <footer class="post-footer">
          
          <div class="post-tags">
              <a href="/tags/Flex/" rel="tag"><i class="fa fa-tag"></i> Flex</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/04/16/UNI-APP%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E4%BD%8D%E7%BD%AE%E4%BF%A1%E6%81%AF/" rel="prev" title="UNI-APP获取元素位置信息">
      <i class="fa fa-chevron-left"></i> UNI-APP获取元素位置信息
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/04/30/%E5%BE%AE%E5%88%86%E5%92%8C%E7%A7%AF%E5%88%86%E5%85%AC%E5%BC%8F%E9%9B%86%E5%90%88/" rel="next" title="微分和积分公式集合">
      微分和积分公式集合 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#网页布局（Layout）是CSS的一个重点应用"><span class="nav-number">1.</span> <span class="nav-text">网页布局（Layout）是CSS的一个重点应用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#一、Flex布局是什么？"><span class="nav-number">2.</span> <span class="nav-text">一、Flex布局是什么？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#二、基本概念"><span class="nav-number">3.</span> <span class="nav-text">二、基本概念</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#三、容器的属性"><span class="nav-number">4.</span> <span class="nav-text">三、容器的属性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#3-1-flex-direction属性"><span class="nav-number">4.1.</span> <span class="nav-text">3.1 flex-direction属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-2-flex-wrap属性"><span class="nav-number">4.2.</span> <span class="nav-text">3.2 flex-wrap属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-3-flex-flow"><span class="nav-number">4.3.</span> <span class="nav-text">3.3 flex-flow</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-4-justify-content属性"><span class="nav-number">4.4.</span> <span class="nav-text">3.4 justify-content属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-5-align-items属性"><span class="nav-number">4.5.</span> <span class="nav-text">3.5 align-items属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-6-align-content属性"><span class="nav-number">4.6.</span> <span class="nav-text">3.6 align-content属性</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#四、项目的属性"><span class="nav-number">5.</span> <span class="nav-text">四、项目的属性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#4-1-order属性"><span class="nav-number">5.1.</span> <span class="nav-text">4.1 order属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-2-flex-grow属性"><span class="nav-number">5.2.</span> <span class="nav-text">4.2 flex-grow属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-3-flex-shrink属性"><span class="nav-number">5.3.</span> <span class="nav-text">4.3 flex-shrink属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-4-flex-basis属性"><span class="nav-number">5.4.</span> <span class="nav-text">4.4 flex-basis属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-5-flex属性"><span class="nav-number">5.5.</span> <span class="nav-text">4.5 flex属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-6-align-self属性"><span class="nav-number">5.6.</span> <span class="nav-text">4.6 align-self属性</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="飞翔"
      src="/images/avatar.png">
  <p class="site-author-name" itemprop="name">飞翔</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">22</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">16</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">24</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">飞翔</span>
</div>
  <div class="powered-by">由 <span class="exturl theme-link" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & <span class="exturl theme-link" data-url="aHR0cHM6Ly9waXNjZXMudGhlbWUtbmV4dC5vcmc=">NexT.Pisces</span> 强力驱动
  </div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>




  
  <script>
    (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      bp.src = (curProtocol === 'https') ? 'https://zz.bdstatic.com/linksubmit/push.js' : 'http://push.zhanzhang.baidu.com/push.js';
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>




  
<script src="/js/local-search.js"></script>













  

  

  

</body>
</html>
